<template>
  <div class="app-container" style="padding: 20px">
    <el-card>
      <div slot="header">海报设置</div>
      <div>
        <div class="tip" style="margin-top: 20px">
          <p>
            海报开启后前台切换下一个自动调用对应海报背景。您必须保证至少有一个海报在启用状态。
          </p>
          <p>
            您可自主添加海报模板，海报尺寸1080(宽)x1920(高)，生成的海报自带信息内容展示区域，无须预留白块区域。
          </p>
        </div>
        <el-row :gutter="10">
          <el-col :span="4">
            <div class="el-card_img" style="" @click="addPoster">
              <div class="el-card__body">
                <i class="el-icon-plus"></i>
                <span class="add">添加海报</span>
              </div>
            </div>
          </el-col>
          <el-col
            :span="4"
            v-for="(poster, index) in selPosterLists"
            :key="index"
          >
            <div class="el-card_img" style="">
              <div class="el-card__body">
                <div class="imgbox">
                  <img :src="poster.url" alt="" />
                  <!-- <img src="@/assets/common/10065.jpg" alt="" />
                         -->
                </div>
                <div class="actions">
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click="editPoster(poster)"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    icon="el-icon-view"
                    @click="previewPoster(poster)"
                    >预览</el-button
                  >
                  <el-button
                    type="text"
                    icon="el-icon-delete"
                    @click="deletePoster(poster.id)"
                    >删除</el-button
                  >
                </div>
                <div class="clearfix" style="padding: 14px">
                  <span class="name">{{ poster.name }}</span>
                  <el-row :gutter="10">
                    <el-col :span="16">
                      <span class="audit">状态：</span>
                    </el-col>
                    <el-col :span="8">
                      <el-switch
                        v-model="poster.isDisplay"
                        @change="switchChange(poster)"
                      ></el-switch>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <addPoster :addPosterDialog.sync="addPosterDialog" />
    <editPoster ref="editPosterRef" :editPosterDialog.sync="editPosterDialog" />
    <el-dialog title="预览海报" :visible.sync="previewDialog" width="30%">
      <div class="preview-container">
        <img :src="previewUrl" alt="海报预览" style="width: 100%" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import addPoster from "@/views/application/posterSetup/biographical/components/addPoster";
import editPoster from "@/views/application/posterSetup/biographical/components/editPoster";
import {
  selPosterListApi,
  delPosterByIdApi,
  updatePosterIsDisplayByIdApi,
} from "@/api/application";
export default {
  components: {
    addPoster,
    editPoster,
  },
  data() {
    return {
      addPosterDialog: false,
      editPosterDialog: false,
      type: 2,
      selPosterLists: [],
      previewDialog: false,
      previewUrl: "",
    };
  },
  created() {
    this.selPosterList();
  },
  methods: {
    addPoster() {
      this.addPosterDialog = true;
    },
    async selPosterList() {
      const res = await selPosterListApi({
        type: this.type,
      });
      this.selPosterLists = res.data.map((item) => ({
        ...item,
        isDisplay: item.isDisplay ? true : false,
      }));
    },
    // 删除数据
    async deletePoster(id) {
      this.$confirm("此操作将永久删除该海报, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await delPosterByIdApi(id);
          console.log(res);
          if (res.code === 1) {
            this.$message.success("删除成功!");
            this.selPosterList();
          } else {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          }
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    // 编辑海报
    editPoster(row) {
      console.log(row);
      this.$refs.editPosterRef.formData = row;
      const posterUrl = row.url;
      this.$refs.editPosterRef.fileList = [{ url: posterUrl }];
      this.editPosterDialog = true;
    },
    // 改变状态
    async switchChange(poster) {
      try {
        console.log(poster);
        const displayValue = poster.isDisplay ? 1 : 0;
        const res = await updatePosterIsDisplayByIdApi(poster.id, displayValue);
        console.log(res);
        if (res.code === 1) {
          this.$message.success("设置成功!");
        } else {
          this.$message.error("设置失败");
        }
      } catch {
        this.$message.error("设置失败");
      }
    },
    // 预览海报
    previewPoster(poster) {
      this.previewUrl = poster.url;
      this.previewDialog = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .tip {
    padding: 8px 16px;
    background-color: #fdf6ec;
    border-radius: 4px;
    border-left: 5px solid #f9c77c;
    margin: 0 0 20px;
    p {
      font-size: 14px;
      color: #e6a23c;
      line-height: 1em;
    }
  }
  .el-card_img {
    width: 197px;
    margin-right: 20px;
    float: left;
    margin-bottom: 20px;
    border: 1px solid #ebeef5;
    .el-card__body {
      padding: 0px;
      height: 416px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      .el-icon-plus {
        padding: 0px;
        font-size: 46px;
        margin: 0px auto;
        width: 48px;
        color: rgb(153, 153, 153);
        display: block;
      }
      .add {
        margin-top: 20px;
        color: rgb(58, 142, 230);
        display: inline-block;
      }
    }
  }
}
.imgbox {
  width: 100%;
  display: block;
  height: 347px;
  border-bottom: 1px solid rgb(227, 227, 227);
  background-color: rgb(153, 153, 153);
  overflow: hidden;
  position: relative;
}
.clearfix {
  width: 195px;
  height: 70px;
  margin-top: 4px;
  line-height: 12px;
}
.name {
  font-size: 14px;
  margin-bottom: 14px;
  display: block;
}
.audit {
  margin-top: 10px;
  font-size: 13px;
  color: rgb(102, 102, 102);
}
.actions {
  width: 100%;
  background-color: rgba(51, 51, 51, 0.7);
  display: none;
  color: #fff;
  padding: 8px 0;
  justify-content: space-around;
  align-items: center;

  .el-button {
    flex: 1;
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 5px 0;

    &:hover {
      color: #409eff;
    }

    &:not(:last-child) {
      border-right: 1px solid rgba(255, 255, 255, 0.2);
    }
  }
}
.el-card_img {
  &:hover {
    .actions {
      display: flex;
    }
  }
}
.preview-container {
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    max-height: 70vh;
    object-fit: contain;
  }
}
</style>
